<template>
    <div class="delete">

        <el-card>
            <el-form :inline="true" :model="search" class="demo-form-inline">
                <el-form-item label="名称">
                    <el-input v-model="search.keyword" placeholder="搜索"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
            </el-form>
            <el-button type="primary" @click="dialogFormVisible = true">添加</el-button>

            <el-dialog title="" :visible.sync="dialogFormVisible">
                <el-form :model="insert">
                    <el-form-item>
                        <!--                        <el-upload-->
                        <!--                                :http-request="uploadSectionFile"-->
                        <!--                                class="upload-demo"-->
                        <!--                                drag-->
                        <!--                                action="/api/upload/uploadVideo"-->
                        <!--                                multiple>-->
                        <!--                            <i class="el-icon-upload"></i>-->
                        <!--                            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>-->
                        <!--                            <el-button style="margin-left: 10px;" size="small" type="success"-->
                        <!--                                       @click="this.$refs.upload.submit()">-->
                        <!--                                上传到服务器-->
                        <!--                            </el-button>-->

                        <!--                        </el-upload>-->
                        <el-upload
                                class="upload-demo"
                                ref="upload"
                                :http-request="uploadSectionFile"
                                action="http://localhost:81/api/upload/uploadVideo"
                                :auto-upload="false">
                            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                            <el-button style="margin-left: 10px;" size="small" type="success"
                                       @click="$refs.upload.submit()">上传到服务器
                            </el-button>
                            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                        </el-upload>
                    </el-form-item>
                    <el-form-item>
                        <el-upload
                                class="upload-demo2"
                                ref="upload2"
                                :http-request="uploadSectionFile"
                                action="http://localhost:81/api/upload/uploadPicture"
                                list-type="picture"
                                :auto-upload="false">
                            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                            <el-button style="margin-left: 10px;" size="small" type="success"
                                       @click="$refs.upload2.submit()">上传到服务器
                            </el-button>
                            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="视频标题" :label-width="'120px'">
                        <el-input style="width:100px;" size="medium" v-model="insert.name"
                                  autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="简介" :label-width="'120px'">
                        <el-input type="textarea" v-model="insert.storyline" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="类别" :label-width="'120px'">
                        <el-select v-model="insert.genre" placeholder="选择类别">
                            <el-option :label="c.genre" :value="c.genre" v-for="c in categories"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>


                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="movieAdd">确 定</el-button>
                </div>
            </el-dialog>

            <el-table :data="items.list">
                <el-table-column label="标题">
                    <template scope="scope">
                        <el-input v-if="scope.row.status" size="small" v-model="temp.name" placeholder="请输入内容"
                        ></el-input>
                        <span v-else>{{scope.row.name}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="简介">
                    <template scope="scope">
                        <el-input v-if="scope.row.status" size="small" v-model="temp.storyline" placeholder="请输入内容"
                        ></el-input>
                        <span v-else>{{scope.row.storyline}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="类别">
                    <template scope="scope">
                        <!--                        <el-input v-if="scope.row.status" size="small" v-model="temp.category" placeholder="请输入内容"-->
                        <!--                        ></el-input>-->
                        <el-select v-if="scope.row.status" v-model="temp.genre" placeholder="选择类别"
                                   style="margin-left: 50px">
                            <el-option :label="c.genre" :value="c.genre" v-for="c in categories"></el-option>
                        </el-select>
                        <span v-else>{{scope.row.genre}}</span>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="120">
                    <template slot-scope="scope">
                        <el-button v-if="scope.row.status" @click="confirmEdit(scope.$index,scope.row)" type="text"
                                   size="small">确认
                        </el-button>
                        <el-button v-else type="text" size="small" @click="moveDelete(scope.row)">删除</el-button>
                        <el-button v-if="scope.row.status" type="text" size="small"
                                   @click="cancelEdit(scope.$index, scope.row)">取消编辑
                        </el-button>
                        <el-button type="text" size="small" @click="edit(scope.$index, scope.row)" v-else>编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="items.pages"
                    :current-page.sync="currentPage"
                    @current-change="handleCurrentChange">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
    export default {
        name: "delete",
        data() {
            return {
                search: {keyword: ""},
                items: [],
                currentPage: 1,
                insert: {
                    big_genre: '原创',
                    episode: 1
                },
                categories: [],
                dialogFormVisible: false,
                fileList: [],
                temp: [],

            }
        },
        mounted() {
            this.loadItem()
        },
        methods: {
            handleEdit(index, row) {
                console.log(index, row);
                row.status = false;
                this.$set(this.items, index, row)
            },
            moveDelete(row) {
                this.$http.post("/movie/delete", row).then((res) => {
                    if (res.data.code == 0) {
                        this.$msg.success(res.data.message + '请刷新页面')
                    } else {
                        this.$msg.fail(res.data.message)
                    }
                })
            },
            edit(index, row) {
                this.temp = JSON.parse(JSON.stringify(row))
                row.status = true;
                this.$set(this.items.list, index, row)
            },
            cancelEdit(index, row) {
                row.status = false;
                this.$set(this.items.list, index, row)
            },
            confirmEdit(index, row) {
                row = JSON.parse(JSON.stringify(this.temp))
                this.$set(this.items.list, index, JSON.parse(JSON.stringify(this.temp)))
                row.status = false;
                this.$http.post("/movie/update", this.temp).then((res) => {
                    this.$msg.success(res.data.message)
                })
            },
            uploadSectionFile: function (params) {
                let self = this,
                    file = params.file,
                    fileType = file.type,
                    isImage = fileType.indexOf('image') != -1,
                    isVideo = fileType.indexOf('video') != -1;

                // let isLt2M = file.size / 1024 / 1024 < 2;
                // if (!isLt2M) {
                //     this.$msg.fail('上传图片或视频大小不能超过 2MB!', '提示', {type: 'error'});
                //     self.$refs.upload.uploadFiles = [];
                //     return;
                // }

                if (!isImage && !isVideo) {
                    this.$msg.fail('请选择图片或视频!', '提示', {type: 'error'});
                    self.$refs.upload.uploadFiles = [];
                    return;
                }

                if (isImage) {
                    const formData = new FormData()
                    formData.append("file", file)
                    this.$http.post("/upload/uploadImg", formData, {headers: {'Content-Type': 'multipart/form-data'}}).then((res) => {
                        if (res.data.code == 0) {
                            this.insert.img = res.data.data.url
                            this.$msg.success("图片上传成功")
                        }
                    })
                } else if (isVideo) {
                    let isMP4 = file.type === 'video/mp4';
                    let isWebm = file.type === 'video/webm'
                    if (!(isMP4 || isWebm)) {
                        this.$msg.fail('上传视频只支持 mp4 格式!', '提示', {type: 'error'});
                        self.$refs.upload.uploadFiles = [];
                        return;
                    }
                    const formData = new FormData()
                    formData.append("file", file)
                    this.$http.post("/upload/uploadVideo", formData, {headers: {'Content-Type': 'multipart/form-data'}}).then((res) => {
                        if (res.data.code == 0) {
                            this.insert.href = res.data.data.url
                            this.$msg.success("视频上传成功")

                        }
                    })
                }
            },
            onSubmit() {
                this.$http.get("/esProduct/search/simple", {params: this.search}).then((res) => {
                    if (res.data.code == 0) {
                        this.$set(this.items, "list", res.data.data.list)
                    }
                })
            },
            loadItem() {
                this.$http.get("/movie/items", {params: {start: this.currentPage}}).then((res) => {
                    this.items = res.data.data
                })
                this.$http.get("/movie/genres", {params: {"big_genre": "原创"}}).then((res) => {
                    this.categories = res.data.data
                })
            },
            movieAdd() {
                this.$http.post("/movie/insertMovie", this.insert).then((res) => {
                    if (res.data.code == 0) {
                        this.$msg.success(res.data.message)
                        this.dialogFormVisible = false;
                    } else {
                        this.$msg.fail(res.data.message)
                    }
                })
            },
            handleCurrentChange() {
                this.currentPage++;
                this.loadItem();
            },
        }
    }
</script>

<style scoped>
    .el-card {
        padding-top: 0;
    }
</style>